<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <script src="../jQuery/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        ul,li{
         margin: 0;
         padding: 0;
         list-style: none;
     }       
     #box{
         width: 520px;
         height: 280px;
         margin: 100px auto;
         position: relative;
     }
     #box .list li{
         position: absolute;
         top: 0;
         left: 0;
         /*display: none;*/
     }
     #box .list li.current{
         display: block;
     }
     #box .count{
         position: absolute;
         left: 10px;
         bottom: 10px;
     }
     #box .count li{
         float: left;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background-color: #f60;
         text-align: center;
         line-height: 20px;
         margin-left: 10px;
         color: #fff;
         opacity: 0.8;
         cursor: pointer;
     }
     #box .count li.current{
         background-color: red;
         opacity: 1;
     }
     p{    
         margin: 0;
         padding: 0;
         width: 100px;
         height: 30px;
         /*background-color: whitesmoke;*/
         display: inline-block;
         position: absolute;
         right: 10px;
         bottom: 10px;
     }
     p>span{
         display: inline-block;
         height: 100%;
         text-align: center;
         line-height: 27px;
         font-size: 24px;
         background-color: lightgray;
         /*opacity: 0.7;*/
         color: #fff;
     }
     span:hover{
         text-shadow: 0 0 4px #fff;
         cursor: pointer;
     }
     p>span:first-child{
         width: 45px;
     }
     p>span:nth-child(2){
         margin-left: 10px;
         width: 45px;         
     }
    </style>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li class="1"><img src="img/1.jpg" alt=""></li>
            <li class="2"><img src="img/2.jpg" alt=""></li>
            <li class="3"><img src="img/3.jpg" alt=""></li>
            <li class="4"><img src="img/4.jpg" alt=""></li>
            <li class="5"><img src="img/5.jpg" alt=""></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <p><span id="pre"><</span><span id="nex">></span></p>
    </div>
</body>

</html>

<script>

    current = 0;
    var timer = setInterval(auto, 2000);

    function auto() {
        current++;
        if (current >= $('.list li').length) {
            current = 0;
        }
        show(current)
    }

    $('.count li').mouseover(function () {
        show($(this).index());
    })
    $('.count li').hover(function () {
        clearInterval(timer);
    }, function () {
        var index = $(this).index();
        timer = setInterval(auto, 2000)
    })

    function show(index) {
        current = index;
        if (index == $('.list li').length) {
            index = 0;
        }
        $('.list li').eq(current).css('display', 'block').siblings().css('display', 'none')
        $('.count li').eq(current).addClass('current').siblings().removeClass();
    }

    $('span').click(function () {
        // clearInterval(timer);
        if ($(this).index()) {
            current++;
            if (current >= $('.list li').length) {
                current = 0;
            }
        } else {
            current--;
            if (current <= 0) {
                current = 4;
            }
        }
        show(current);
    });

    // 上一页键
    // $('#pre').click(function () {
    //     // $('.list li').eq(current).prev().css('display', 'block').siblings().css('display', 'none')
    //     // $('.count li').eq(current).prev().addClass('current').siblings().removeClass();
    //     // clearInterval(timer);
    // })
    // 下一页键
    // $('#nex').click(function () {
    //     // $('.list li').eq(current).next().css('display', 'block').siblings().css('display', 'none')
    //     // $('.count li').eq(current).next().addClass('current').siblings().removeClass();
    // })


</script>